<template>
    <ul>
        <!-- 为了消除 VSCode 的红色曲线提示，所以使用了 :key="index" ，但这是不合适的 -->
        <li v-for="(item, index) in items" :key="index">
            <!-- 绑定在 <slot> 元素上的 attribute 被称为 "slot props" (即"插槽prop") -->
            <!-- 比如: 将 item 的值绑定到 slot 的 task 属性上，此时的 task 属于 "slot props"  -->
            <!-- 比如: 将 index + 1 后的值绑定到 slot 的 serial 属性上，此时的 serial 属于 "slot props" -->
            <slot :task="item" :serial="index+1">{{item}}</slot>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'TodoList' ,
    data(){
        return {
            items: [ 'Feed a cat' , 'Buy milk' ]
        }
    }
}
</script>

<style>

</style>